<template>
  <div>
    <div class="cityNav">
      <van-nav-bar
        title="城市列表"
        left-arrow
        @click-left="onClickLeft"
        fixed
        z-index="999999"
        class="nav-bar-background-color"
      />
    </div>
    <div>
      <van-index-bar :index-list="indexList" :sticky-offset-top="46">
        <div v-for="item in initialcity" :key="item.value">
          <van-index-anchor index="#">当前城市</van-index-anchor>
          <van-cell :title="item.label" />
        </div>
        <div v-for="item in hotCity" :key="item.pinyin">
          <van-index-anchor index="热">热门城市</van-index-anchor>
          <van-cell
            :title="item1.label"
            v-for="item1 in item"
            :key="item1.label"
            @click="onclick(item1)"
          />
        </div>
        <div v-for="(item, index) in classcity" :key="index">
          <van-index-anchor :index="indexList[index + 2]">{{
            indexList[index + 2]
          }}</van-index-anchor>
          <van-cell
            :title="item2.label"
            v-for="item2 in item"
            :key="item2.value"
            @click="onclick(item2)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { setStorage, getStorage } from '@/utils/storage'
import { getCity, getHot } from '@/api/user'
export default {
  name: 'city-list',
  components: {},
  props: {},
  data() {
    return {
      initialcity: [
        JSON.parse(getStorage('city')) || {
          label: '上海',
          value: 'AREA|dbf46d32-7e76-1196',
          pinyin: 'shanghai',
          short: 'sh'
        }
      ],
      classcity: [],
      citylist: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      hotCity: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getCity('level=1')
    this.citylist = res.data.body
    const hot = await getHot()
    this.hotCity.push(hot.data.body)
    // console.log(hot)
    // push是追加每次追加到数组中一个元素，元素内容大小都无所谓，只要是一次追加，就会在数组中的索引0所对应
    // 只与添加次数有关，添加一次数组长度就加一，追加的内容就在length-1的索引值对应中
    for (let i = 2; i < this.indexList.length; i++) {
      // console.log(this.indexList)
      const obj = this.citylist.filter(
        (item) => item.short[0].toUpperCase() === this.indexList[i]
      )
      this.classcity.push(obj)
    }

    // const obj1 = this.citylist.map((item) => item.short[0].toUpperCase())
    // console.log(obj1)

    // const obj2 = Array.from(new Set(obj1))
    // console.log(obj2)

    // const obj3 = obj2.sort()
    // obj3.unshift('#', '热')
    // this.indexList = obj3
    // console.log(this.indexList)

    // 普通，for循环if判断
    // for (let j = 0; j < this.classcity.length; j++) {
    //   if (this.classcity[j].length === 0) {
    //     this.classcity[j].push({ label: '暂无城市' })
    //   }
    // }

    // 进化，箭头函数if判断
    // this.classcity.forEach((item) => {
    //   if (item.length === 0) {
    //     return item.push({ label: '暂无城市' })
    //   }
    // })

    // 超进化，三元表达式判断
    this.classcity.forEach((item) =>
      item.length ? item : item.push({ label: '暂无城市' })
    )
    console.log(this.classcity)
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onclick(city) {
      // console.log(city)
      setStorage('city', JSON.stringify(city))
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.nav-bar-background-color {
  background: #21b97a;
}
.cityNav {
  height: 46px;
}
</style>
